<template>
  <view class="con">
    <view class="header">
      <u-navbar title="等待分拣" :autoBack="true" leftIconColor="#fff" :titleStyle="{ color: '#fff' }" bgColor="rgba(0,0,0,0)"></u-navbar>
    </view>
    <view class="main">
      <view class="tabCon">
        <view>
          <view class="nameBox">
            <image class="img" src="../../static/dz.png" mode=""></image>
            <view class="nameInfo">
              <view class="f">
                <text>{{ defaultAddressInfo?.userName }}</text>
                {{ defaultAddressInfo?.cell }}
              </view>
              <view class="s">{{ defaultAddressInfo?.address }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main secondBox">
      <view class="firstLine">
        <view class="left">供应商明辉蔬果</view>
      </view>
      <view class="labelLine">
        <view class="label">订单号：</view>
        <view class="value">10274317751144856132</view>
      </view>
      <view class="labelLine">
        <view class="label">下单时间：</view>
        <view class="value">2021-06-17 06：00：00</view>
      </view>
      <view class="labelLine">
        <view class="label">收货时间：</view>
        <view class="value">10-13 06:15 - 06:15</view>
      </view>
      <view class="labelLine">
        <view class="label">商品种类：</view>
        <view class="value">进口香蕉等3件商品</view>
      </view>
      <view class="firstLine" style="margin-top: 32rpx">
        <view class="labelLine">
          <view class="label">订单备注:</view>
          <view class="value">备注内容</view>
        </view>
      </view>
      <view class="labelLine">
        <view class="label">商户信息:</view>
        <view class="value">商户名称</view>
      </view>
    </view>
    <view class="main secondBox">
      <view class="labelLine">
        <view class="label">订单金额:</view>
        <view class="value">¥45</view>
      </view>
      <view class="labelLine">
        <view class="label">出库金额:</view>
        <view class="value">商品称重中，出库后更新金额</view>
      </view>
      <view class="labelLine">
        <view class="label">异常金额:</view>
        <view class="value">¥45</view>
      </view>
      <view class="labelLine">
        <view class="label">实退金额:</view>
        <view class="value">¥45</view>
      </view>
      <view class="firstLine" style="margin-top: 32rpx">
        <view class="labelLine">
          <view class="label">运费:</view>
          <view class="value">¥45</view>
        </view>
      </view>
      <view class="labelLine" style="justify-content: space-between">
        <view class="label">已支付金额:</view>
        <view class="value">¥159</view>
      </view>
      <view class="labelLine" style="justify-content: space-between">
        <view class="label">已退款金额:</view>
        <view class="value">¥159</view>
      </view>
      <view class="labelLine" style="justify-content: space-between">
        <view class="label">合计金额:</view>
        <view class="value">¥159</view>
      </view>
    </view>
    <view class="orderBox main">
      <HengGoodsItem v-for="(item, index) in orderList" isDetails :key="index" :info="item">
        <template #remark>
          <view class="spbz"> 商品备注 </view>
        </template>
      </HengGoodsItem>
    </view>
    <view class="bottomBox">
      <view class="btn-type">取消订单</view>
      <view class="btn-type blue">去支付</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { goPage } from "../../utils/commonFn";
import HengGoodsItem from "../../components/hengGoodsItem.vue";
const orderList = ref([{}]);
const defaultAddressInfo = ref({
  userName: "shanhe",
  cell: "14122312312",
  address: "asdasdasdas",
});
</script>

<style lang="less" scoped>
.con {
  padding-bottom: 180rpx;
}
.header {
  height: 108rpx;
}
.tabCon {
  background: #fff;
  border-radius: 16rpx;
  margin-top: -100rpx;
  width: 100%;

  .nameBox {
    padding: 32rpx;
    display: flex;
    align-items: center;
    .img {
      width: 40rpx;
      height: 60rpx;
      margin-right: 24rpx;
    }
    .nameInfo {
      .f {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        line-height: 36rpx;
        text {
          margin-right: 24rpx;
        }
      }
      .s {
        font-size: 26rpx;
        color: #bebebe;
        line-height: 36rpx;
        margin-top: 8rpx;
      }
    }
  }
}
.secondBox {
  background: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
}
.firstLine {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #f5f5f5;
  .left {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333333;
    line-height: 44rpx;
    font-weight: 600;
  }
}
.orderBox {
  padding: 32rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .spbz {
    width: 146rpx;
    border-radius: 8rpx;
    border: 2rpx solid #f7f7f7;
    padding: 8rpx;
    font-size: 24rpx;
    color: #bebebe;
    text-align: center;
    margin-top: 12rpx;
  }
}
.labelLine {
  width: 100%;
  display: flex;
  font-size: 26rpx;
  margin-top: 32rpx;
  .label {
    width: 160rpx;
    font-size: 26rpx;
    color: #bebebe;
  }
  .value {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #595959;
  }
  &:first-child {
    margin-top: 0rpx;
  }
}
.bottomBox {
  justify-content: flex-end !important;
  .btn-type {
    border-radius: 32rpx;
    border: 2rpx solid #dddee2;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: center;
    padding: 12rpx 24rpx;
    margin-right: 20rpx;
    &:last-child {
      margin-right: 0;
    }
  }
  .blue {
    background: linear-gradient(90deg, #69e07d 0%, #2ed19a 33%, #1bbd7e 100%);
    color: #fff;
  }
}
</style>
